<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>运维管理平台-ABM-SPARK</title>
    <link rel="stylesheet" href="../stylesheets/ie.css">
    <link rel="stylesheet" href="../stylesheets/print.css">
    <link rel="stylesheet" href="../stylesheets/screen.css">
    <link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.css">
</head>
<body>
<header>
    <a href="#">
        <img src="../images/logo.png" height="41" width="262" alt="智树科技">
    </a>
    <a href="../index.html"><i class="icon-cloud"></i>ABM</a>
    <a href="#"><i class="icon-star-half"></i>敬请期待</a>
</header>
<div class="container">
    <div class="sidebar">
        <ul class="sidebar1">
            <li><a href="#"><span><i class="icon-eye-open"></i>监控</span></a>
                <ul class="sidebar2">
                    <li><a href="#"><span>Spark</span></a></li>
                    <li><a href="#"><span>HDFS</span></a></li>
                    <li><a href="#"><span>HBase</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span><i class="icon-flag"></i>事件</span></a>
                <ul class="sidebar2">
                    <li><a href="#"><span>错误信息</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span><i class="icon-table"></i>报表</span></a>
                <ul class="sidebar2">
                    <li><a href="#"><span>应用分析</span></a></li>
                </ul>
            </li>
            <li><a href="#"><span><i class="icon-cogs"></i>设置</span></a>
                <ul class="sidebar2">
                    <li><a href="#"><span>服务器配置</span></a></li>
                </ul>
            </li>
            <li class="onlyone"><a href="#"><span><i class="icon-dashboard"></i>报警设置</span></a></li>
        </ul>
    </div>

    <!-- 图表 -->
    <div class="big-title">
        <h1>套牌分析</h1>

    </div>
    <div class="chart1">
        <div class="chart-title">
            <span>数据执行情况 <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <div id="allchart-chart1" style="min-width:600px;height:400px"></div>
    </div>

    <div class="chart2">
        <div class="chart-title">
            <span>错误提示 <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <ul class="error-height">
            <li class="single-row"><i class="icon-remove-sign"></i>节点1内存剩余量为0</li>
            <li class="double-row"><i class="icon-remove-sign"></i>节点2的中间文件量大</li>
            <li class="single-row"><i class="icon-remove-sign"></i>节点3的GC最大时长超高阈值</li>
            <li class="double-row"><i class="icon-warning-sign"></i>节点4的GC过于频繁</li>
        </ul>
    </div>

    <div class="chart2">
        <div class="chart-title">
            <span>优化选项 <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <div class="dio-box">
            <input type="checkbox" id="optimizeGC" class="checkbox">GC
            <input type="checkbox" id="optimizeJVM" class="checkbox">JVM
            <input type="checkbox" id="optimizeMEM" class="checkbox">MEM
            <input type="checkbox" id="optimizeCPU" class="checkbox">CPU
            <input type="checkbox" id="optimizeLocality" class="checkbox">Locality
            <br>
            <br>
            <button>一键优化</button>
        </div>

    </div>

    <div class="chart3">
        <div class="chart-title">
            <span>内存使用率 <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <div id="allchart-chart3" style="min-width:200px;height:200px"></div>
    </div>

    <div class="chart3">
        <div class="chart-title">
            <span>时间GC <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <div id="allchart-chart4" style="min-width:200px;height:200px"></div>
    </div>

    <div class="chart3">
        <div class="chart-title">
            <span>网络传输 <a href="#"><i class="icon-question-sign"></i></a></span>
        </div>
        <div id="allchart-chart5" style="min-width:200px;height:200px"></div>
    </div>


</div>
<footer>
    <span>上海智树信息科技有限公司</span>
</footer>

<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/highcharts.js"></script>
<script src="../js/main.js"></script>
</body>
</html>